<template>
  <div >
    <div id="main" style="width: 600px;height:400px;"></div>
    <div id="main1" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
export default {
  name: 'Echarts',
  data() {
    return {
      qqq:'0.2%',
      tianqi:[10, 11, 13, 11, 12, 12, 9],
    }
  },
  methods:{
	  myEcharts(){
		  // 基于准备好的dom，初始化echarts实例
		  var myChart = this.$echarts.init(document.getElementById('main'));
		  // 指定图表的配置项和数据
		  var option = {
          grid: {
            top: "30%"
          },
			    title: {
			           text: '未来一周气温变化',
			           subtext: '纯属虚构'
			       },
			       tooltip: {
			           trigger: 'axis'
			       },

			       legend: {
			           data: ['最高气温', '最低气温','啦啦啦'],
                 left: "3%",
                 top: "13%"
			       },
			       toolbox: {
			           show: true,
			           feature: {
/* 			               dataZoom: {
			                   yAxisIndex: 'none'           //缩放大小
			               }, */
			               dataView: {readOnly: false},
			               magicType: {type: ['line', 'bar']},
			               restore: {},
			               saveAsImage: {}
			           }
			       },
			       xAxis: {
			           type: 'category',
			           boundaryGap: false,
			           data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
			       },
			       yAxis: {
			           type: 'value',
			           axisLabel: {
			               formatter: '{value}'
			           }
			       },
			       series: [
			           {
			               name: '最高气温',
			               type: 'line',
			               data: this.tianqi,
			               markPoint: {
			                   data: [
			                       {type: 'max', name: '最大值'},
			                       {type: 'min', name: '最小值'}
			                   ]
			               },
			               markLine: {
			                   data: [
			                       {type: 'average', name: '平均值'}
			                   ]
			               }
			           },
                 {
                     name: '啦啦啦',
                     type: 'line',
                     data: [18, 11, 13, 20, 15, 11, 3],
                     markPoint: {
                         data: [
                             {type: 'max', name: '最大值'},
                             {type: 'min', name: '最小值'}
                         ]
                     },
                     markLine: {
                         data: [
                             {type: 'average', name: '平均值'}
                         ]
                     }
                 },
			           {
			               name: '最低气温',
			               type: 'line',
			               data: [1, 6, 2, 5, 3, 2, 0],
			               markPoint: {
			                   data: [
			                       {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
			                   ]
			               },
			               markLine: {
			                   data: [
			                       {type: 'average', name: '平均值'},
			                       [{
			                           symbol: 'none',
			                           x: '90%',
			                           yAxis: 'max'
			                       }, {
			                           symbol: 'circle',
			                           label: {
			                               position: 'start',
			                               formatter: '最大值'
			                           },
			                           type: 'max',
			                           name: '最高点'
			                       }]
			                   ]
			               }
			           }
			       ]
		  };

		  // 使用刚指定的配置项和数据显示图表。
		  myChart.setOption(option);
		  },
      myEcharts1(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('main1'));
        // 指定图表的配置项和数据
        var option = {
            dataset: [{
                dimensions: ['name', 'age', 'profession', 'score', 'date'],
                source: [
                    [' Hannah Krause ', 41, 'Engineer', 314, ],
                    ['Zhao Qian ', 20, 'Teacher', 351, ],
                    [' Jasmin Krause ', 52, 'Musician', 287, ],
                    ['Li Lei', 37, 'Teacher', 219, ],
                    [' Karle Neumann ', 25, 'Engineer', 253, ],
                    [' Adrian Groß', 19, 'Teacher', null,],
                    ['Mia Neumann', 71, 'Engineer', 165, ],
                    [' Böhm Fuchs', 36, 'Musician', 318, ],
                    ['Han Meimei ', 67, 'Engineer', 366, ],
                ]
            }, {
                transform: {
                    type: 'sort',
                    config: { dimension: 'score', order: 'desc' }
                }
            }],
            xAxis: {
                type: 'category',
                axisLabel: { interval: 0, rotate: 30 },
            },
            yAxis: {},
            series: {
                type: 'bar',
                encode: { x: 'name', y: 'score' },
                datasetIndex: 1
            }
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        },
  },
  mounted() {
  	this.myEcharts();
    this.myEcharts1();
  }
}
</script>

<style>

</style>
